<template>
    <div id='order'>
         <el-tabs v-model="status" @tab-click="handleClick">
            <el-tab-pane label="所有订单" name="全部"></el-tab-pane>
            <el-tab-pane label="未支付" name="1"></el-tab-pane>
            <el-tab-pane label="已下单" name="2"></el-tab-pane>
            <el-tab-pane label="已完成" name="3"></el-tab-pane>
            <el-tab-pane label="待评价" name="4"></el-tab-pane>
         </el-tabs>
          <!-- :data="list.list" -->
         <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            label="订单编号"
            prop="id"
            width="120">
            </el-table-column>
            <el-table-column
            prop="address"
            label="订单地址"
            width="180">
            </el-table-column>
            <el-table-column
            prop="orderTime"
            label="订单时间"
            show-overflow-tooltip>
            </el-table-column>
              <el-table-column
            prop="status"
            label="订单状态"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="type"
            label="发货类型"
            show-overflow-tooltip>
            </el-table-column>
             <el-table-column
            label="操作"
            show-overflow-tooltip>
            <template v-slot="slot">
            <el-button size='mini' @click="detail(slot.row)" >详细</el-button>
            <!-- <el-button size='mini' v-if="slot.row.status ==='待评价'" @click.prevent="toSendOrderHandler(slot.row)">派单</el-button> -->
            </template>
            </el-table-column>
          
        </el-table>
        <!-- 分页 -->
         <el-pagination
                layout="prev, pager, next" @current-change="handlePageChange"
                :total="list.total" :pageSize="list.pageSize" :current-page="1"> 
         </el-pagination>
         <!-- 模态框 -->
         <el-dialog
      title="详细"
      :visible.sync="visible"
      width="30%">
      <div>
        <div style="display:flex; justify-content:space-between">
             <p> <strong>订单编号：</strong> {{form.id}} </p>
              <p> <strong>收货地址：</strong> {{form.address}} </p>
        </div>
       <div style="display:flex; justify-content:space-between">
             <p> <strong>下单时间：</strong> {{form.orderTime}} </p>
             <p> <strong>订单状态：</strong> {{form.status}} </p>
       </div>
       <div style="display:flex; justify-content:space-between">
           <p> <strong>运输类型</strong> {{form.type}} </p>
            <p> <strong>订单金额：</strong> {{form.total}} </p>
       </div>
        <!-- <p> <strong>顾客手机号：</strong> {{form.customer_telephone}} </p> -->
        <!-- <p v-if="form.status == '待评价'"> 
          <strong>服务员工：</strong> 
           <el-radio-group v-model="waiterId">
            <el-radio 
              border
              size="small"
              v-for="e in employee" 
              :key="e.id"
              :label="e.id" >{{e.realname}}</el-radio>
          </el-radio-group>
        </p> -->
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeModalHandler">取 消</el-button>
        <el-button size="small" type="primary" @click="closeModalHandler">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import { mapActions,mapState } from 'vuex';
export default {
    data(){
        return {
          status:'全部',
          visible:false,
          form:{},
          waiterId:{},
          order:{},
          // list:[
          //   {id:'1',orderTime:'2021-10-31',total:'21元',status:'待支付',customerId:'23',},
          //   {id:'2',orderTime:'2021-5-21',total:'45元',status:'已完成',customerId:'24',},
          //   {id:'3',orderTime:'2021-9-27',total:'26元',status:'待确认',customerId:'25',},
          //   ]
        }
    },
    methods: {
        ...mapActions('order',['query','sendOrder','handler','queryAll']),
        handleClick(){
        if(this.status=="全部"){
           this.queryAll()
        }else{
            this.params.status=this.status
            this.query(this.status);
        }
      },
      detail(row){
          this.form = row;
          this.visible = true
      },
       handlePageChange(page){
            this.params.page = page+1;
            this.query()
        },
         // 去派单，将模态框打开，然后选择员工作为派单对象
        toSendOrderHandler(row){
          // 模态框显示当前订单信息
          this.form = row;
          this.order.orderId=this.form.id
          console.log(order.orderId)
          this.sendOrder();
          
          this.visible = true;
        },
        // 点击派单
        submitHandler(){
          this.order.waiterId=this.waiterId
          console.log(order.waiterId)
          this.handler(this.order).then(()=>{
            this.query();
            // alert(1)
          })
          this.visible = false
        },
        // 关闭模态框
      closeModalHandler(){
        this.visible = false;
      }
    },
    //加载数据
    created() {
        this.queryAll();
    },
    computed: {
         ...mapState('order',['list','params','employee']),
    },
    
}
</script>

<style>
#order{
    padding: 20px;
   
}
</style>